import { FC, useEffect } from 'react'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import { fetchList, toCart, addItemCart, reduceItemCart, CartItemProps } from './homeSlice'
import { Card, Toast, Button, Image } from 'antd-mobile'

interface HomePropsType {}

const Home: FC<HomePropsType> = (props) => {
  // 提交
  const dispatch = useAppDispatch()
  // 获取
  const store = useAppSelector((s) => s.home)

  useEffect(() => {
    dispatch(fetchList())
  }, [])

  const onClick = (item: CartItemProps) => {
    console.log('onClick')
    dispatch(toCart(item))
  }

  return (
    <div style={{ padding: 10, background: 'gray' }}>
      {store.list.map((item) => {
        return (
          <div key={item.id} style={{ margin: 5 }}>
            <Card title="卡片标题">
              <Image src={item.img} width={64} height={64} fit="cover" style={{ borderRadius: 4 }} />

              <Button color="primary" onClick={() => onClick(item)} fill="solid">
                +
              </Button>
            </Card>
          </div>
        )
      })}
    </div>
  )
}

export default Home
